<template>
  <div style="height: 100%;">
    <el-container>
      <!-- 头部区 -->
      <el-header>
        <!-- 标题 -->
        <div class="title1" v-if="isShow">
          <h3>信息采集智能管理系统</h3>
        </div>
        <div class="title2" v-else>
          <h3>ERP</h3>
        </div>
        <!-- 折叠按钮 刷新按钮 -->
        <div class="btn">
          <ul>
            <li v-if="isShow" @click="controlShow"> <i class="el-icon-s-unfold"></i></li>
            <li v-else @click="controlShow"> <i class="el-icon-s-fold"></i></li>
            <li> <i class="el-icon-refresh"></i></li>
          </ul>
        </div>
        <!-- 个人和退出区 -->
        <div class="person">
          <div class="full" @click="screen">
            <i class="el-icon-full-screen"></i>
          </div>
          <div class="photo">

            <el-dropdown>
              <span><img src="../assets/head.png" alt="" align="middle">&nbsp;&nbsp;test
                <i class="el-icon-arrow-down"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>修改密码</el-dropdown-item>
                <el-dropdown-item @click.native="logout">退出</el-dropdown-item>

              </el-dropdown-menu>
            </el-dropdown>
          </div>

        </div>
      </el-header>
      <el-container>
        <!-- 侧边栏 -->
        <el-aside :width="isCollapse ? '64px' : '200px'">
          <!-- 菜单 -->
          <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" background-color="#5A5AAD" text-color="#fff"
            active-text-color="#ffd04b" :collapse="isCollapse" router>
            <!-- 一级菜单 -->
            <el-submenu :index="item.id" v-for="item in navList" :key="item.id">
              <template slot="title">
                <i :class="iconObj1[item.id]"></i>
                <span>{{item.title}}</span>
              </template>
              <!-- 二级菜单 -->
              <el-menu-item :index="subItem.path" v-for="subItem in item.children" :key="subItem.id"
                @click="addTab(subItem)"><i :class="iconObj2[subItem.id]"></i>{{subItem.title}}</el-menu-item>
            </el-submenu>

          </el-menu>
        </el-aside>
        <!-- 内容主体区 -->
        <el-main>
          <!-- 标签 -->
          <el-tabs v-model="editableTabsValue" @tab-remove="removeTab" @tab-click="skipRouter">
            <el-tab-pane name="0">
              <span slot="label" class="house"><i class="el-icon-s-home"></i></span>
            </el-tab-pane>
            <el-tab-pane v-for="(item) in editableTabs" :key="item.id" :label="item.title" :name="item.id" closable>
            </el-tab-pane>

          </el-tabs>
          <!-- 内容卡片 -->
          <el-card class="main">
            <chart v-if="this.$route.path=='/home' ? true:false"></chart>
            <router-view v-else></router-view>
          </el-card>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Chart from './Chart'
export default {
  data() {
    return {
      isShow: true,
      isCollapse: false,
      fullscreen: false,
      iconObj1: { "001": "el-icon-edit-outline", "002": "el-icon-data-line" },
      iconObj2: {
        "001": "el-icon-folder",
        "002": "el-icon-document-checked",
        "003": "el-icon-collection",
        "004": "el-icon-document-checked",
        "005": "el-icon-postcard",
      },
      navList: [
        {
          id: "001",
          title: "信息采集",
          children: [
            {
              id: "001",
              title: "信息采集管理",
              path: "/infogathermanage",
            },
            {
              id: "002",
              title: "新生录取信息",
              path: "/newborngathermessage",
            },
            {
              id: "003",
              title: "学籍管理信息",
              path: "/studentstatus",
            },
            {
              id: "004",
              title: "毕业就业信息",
              path: "/graduationjobinfo",
            },
            {
              id: "005",
              title: "教师培训信息",
              path: "/teachertraininfo",
            },
          ],
        },
        {
          id: "002",
          title: "信息统计",
          children: [
            {
              id: "006",
              title: "新生信息统计",
            },
            {
              id: "007",
              title: "学籍信息统计",
            },
            {
              id: "008",
              title: "毕业信息统计",
            },
          ],
        },
      ],
      editableTabs: [],
      tabIndex: 0,
      editableTabsValue: "0",
      isActive: true,
      // 控制哪个菜单激活
      activeIndex:''
    };
  },
  created() {
    if (this.$route.path == "/home") return;

    this.$router.replace("/home");
  },
  methods: {
    controlShow() {
      this.isShow = !this.isShow;
      this.isCollapse = !this.isCollapse;
    },
    // 控制是否全屏方法
    screen() {
      let element = document.documentElement;
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
      }
      this.fullscreen = !this.fullscreen;
    },
    // 退出
    logout() {
      window.sessionStorage.clear();
      this.$router.push("/login");
    },
    // 添加标签事件,绑定在二级菜单上
    addTab(obj) {
      // console.log(obj);
      for (const item of this.editableTabs) {
        // 判断标签是否打开,如果打开直接退出
        if (obj.title == item.title) return (this.editableTabsValue = item.id);
      }
      let newTabName = ++this.tabIndex + "";

      this.editableTabs.push({
        title: obj.title,
        id: newTabName,
        content: "New Tab content",
        path: obj.path,
      });
      this.editableTabsValue = newTabName;
      // console.log(this.editableTabs);
    },
    // 移除标签
    removeTab(targetName) {
      let tabs = this.editableTabs;
      let activeName = this.editableTabsValue;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.id === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.id;
            }
          }
        });
      }

      this.editableTabsValue = activeName;

      this.editableTabs = tabs.filter((tab) => tab.id !== targetName);
    },
    skipRouter(tab, event) {
      if (this.$route.path == "/home") return;
      //判断是否为房子
      if (tab.index == 0) return this.$router.replace("/home");
      const href = window.location.href;
      if (href.includes(this.editableTabs[tab.index - 1].path)) return;
      
      this.$router.replace(this.editableTabs[tab.index - 1].path);
      
      this.activeIndex=this.$route.path
     
    },
  },
  components: {
    Chart,
  },
};
</script>
<style lang='scss' scoped>
.el-container {
  height: 100%;
}
.el-header {
  background-color: #6fb7b7;

  display: flex;
  flex-direction: row;
  padding: 0px;
  justify-content: space-between;

  .title1 {
    color: white;
    width: 200px;
    line-height: 60px;
    padding-left: 10px;
    box-sizing: border-box;
  }
  .title2 {
    color: blue;
    width: 64px;
    line-height: 60px;
    padding-left: 10px;
    box-sizing: border-box;
  }
  .btn {
    flex-grow: 1;
    ul {
      list-style: none;
      height: 60px;

      li {
        list-style: none;
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        // transition: all 0.1s;
        cursor: pointer;
        margin: 0;
      }
      li:hover {
        background-color: #4f9d9d;
      }
    }
  }
  .person {
    width: 200px;
    display: flex;
    .full {
      width: 60px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      cursor: pointer;
    }
    .full:hover {
      background-color: #4f9d9d;
    }
    .photo {
      flex-grow: 1;
      text-align: center;
      line-height: 60px;
      vertical-align: text-bottom;
      span {
        cursor: pointer;
        display: block;
        height: 58px;
        img {
          width: 45px;
          height: 45px;
          border-radius: 50%;
          vertical-align: middle;
        }
        i {
          transition: all 0.5s;
        }
      }
      span:hover {
        background-color: #4f9d9d;
        i {
          transform: rotate(180deg);
        }
      }
    }
  }
}

.el-aside {
  background-color: #5a5aad;
  color: #333;
  text-align: center;
  line-height: 200px;

  .el-menu {
    // height: 100%;
    border-right: none;
    transition: all 0.5s;
    // padding-right: 50px;
    .el-submenu {
      text-align: start;
    }
  }
}

.el-main {
  background-color: #f0f4f5;
  padding: 0;

  .el-tabs {
    background-color: white;
    .house {
      display: inline-block;
      width: 50px;
      text-align: center;
    }
  }
  .main {
    margin: 20px 20px;
  }
}
</style>